<template>
	<div class="star-benefits">
		<div class="grid lg:grid-cols-2 grid-cols-1">
			<div id="star-rebate" class="vip-bonus">
				<p class="table-title">
					{{ $t('rewards.starRebates.starRebate') }}
				</p>
				<table>
					<thead class="table-header">
						<tr>
							<th style="width: 10%">
								<div style="height: 0.64rem" />
							</th>
							<th>{{ $t('rewards.starRebates.sportsVW') }}</th>
							<th>{{ $t('rewards.starRebates.sportsVL') }}</th>
							<th>{{ $t('rewards.starRebates.sportsIW') }}</th>
							<th>{{ $t('rewards.starRebates.sportsIL') }}</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="item in config?.star" :key="item._id">
							<td style="width: 10%">
								<base-image
									class="w-[40px] aspect-square block"
									:src="item.star.logo"
									alt=""
									type="server" />
							</td>
							<td>
								{{ percentage(item.validCommissionSetting.winBonus, true) }}
							</td>
							<td>
								{{ percentage(item.validCommissionSetting.loseBonus, true) }}
							</td>
							<td>
								{{ percentage(item.InvalidCommissionSetting.winBonus, true) }}
							</td>
							<td>
								{{ percentage(item.InvalidCommissionSetting.loseBonus, true) }}
							</td>
							<td></td>
						</tr>
					</tbody>
				</table>
				<div class="vip-rebate-note">
					<p>{{ $t('rewards.starRebates.sportsVWNote') }}</p>
					<p>{{ $t('rewards.starRebates.sportsVLNote') }}</p>
					<p>{{ $t('rewards.starRebates.sportsIWNote') }}</p>
					<p>{{ $t('rewards.starRebates.sportsILNote') }}</p>
					<p>
						{{
							$t('rewards.starRebates.invalidDescription', {
								minCharacter: config?.setting?.minCharacter || 25
							})
						}}
					</p>
				</div>
			</div>
			<div id="star-perks" class="vip-bonus bg-bg-3 rounded-[4px]">
				<p class="table-title">
					{{ $t('rewards.starRebates.starPerks') }}
				</p>
				<table>
					<thead class="table-header">
						<tr class="bg-bg-3">
							<th>
								<Coming-soon-tooltip />
								<span>{{ $t('rewards.starRebates.bigBets') }}</span>
							</th>
							<th>{{ $t('rewards.starRebates.paymentPriority') }}</th>
							<th>{{ $t('rewards.starRebates.starHost') }}</th>
							<th>{{ $t('rewards.starRebates.specialEvents') }}</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="item in config?.star" :key="item._id">
							<td>
								<div v-if="RewardsData.star[item.star.level]?.bb" class="wrap-bb-icon h-[40px]">
									<img
										src="@/assets/img/activity/vip-benefits/bb.svg"
										alt=""
										class="icon-small-size" />
									<span>x{{ RewardsData.star[item.star.level]?.bb }}</span>
								</div>
							</td>
							<td>
								<base-icon
									v-if="RewardsData.star[item.star.level]?.paymentPriority"
									name="correct2"
									class="checked-icon" />
							</td>
							<td>
								<base-icon
									v-if="RewardsData.star[item.star.level]?.starHost"
									name="correct2"
									class="checked-icon" />
							</td>
							<td>
								<base-icon
									v-if="RewardsData.star[item.star.level]?.specialEvents"
									name="correct2"
									class="checked-icon" />
							</td>
							<td></td>
						</tr>
					</tbody>
				</table>
				<div class="vip-rebate-note rich-text-area">
					<div class="marker-1em">
						{{ $t('rewards.starRebates.paymentPriorityNote1') }}
					</div>
					<div class="marker-1em">
						{{ $t('rewards.starRebates.paymentPriorityNote2') }}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useActivityStore } from '@/store'
import { percentage } from '@/utils'
import { RewardsData } from '@/views/activity/components/table-benefits/rewards-data.ts'
import { BaseIcon, BaseImage } from '@/components/base'
import ComingSoonTooltip from '../components/coming-soon-tooltip/index.vue'

const activityStore = useActivityStore()
const config: any = computed(() => activityStore.config)
</script>

<style lang="scss" scoped>
.star-benefits {
	padding: 10px 17px 69px;
	//@include font-normal();
	.icon-size {
		display: block;
		width: 40px;
		height: 40px;
	}
	.icon-small-size {
		width: 16px;
		height: 16px;
	}
	.wrap-bb-icon {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 4px;
	}
	.text-yellow {
		color: var(--color-text-f);
	}
	.box-item {
		width: 280px;
		min-height: 232px;
		border-radius: 10px;
		position: relative;

		.item-content {
			text-align: center;
			font-size: 10px;
			line-height: 16px;
			padding: 16px;
			color: var(--color-white);
			img {
				width: 250px;
				height: 95px;
			}
			.text-yellow {
				padding: 2px 0;
				font-size: 14px;
			}
			.link {
				color: var(--color-text-f);
				text-decoration: underline;
				text-underline-offset: 2px;
			}
			.item-note {
			}
		}
	}

	.vip-bonus {
		.table-title {
			//@include font-normal();
			text-align: center;
			padding: 18px 0;
		}
	}
	.bg-purple {
		background: linear-gradient(180deg, #840c88 0%, #471a5c 29.72%, #3d2755 69.06%, #8f2092 100%);
	}
	table {
		width: 100%;
		.table-header {
			//position: sticky;
			//top: 0;
			//z-index: 10;
			//background: var(--color-bg-1);
			//border-radius: 4px;
			//color: var(--color-text-2);
			//font-size: 10px;
			////@include font-normal();
			//position: sticky;
			top: 0;
			z-index: 10;
			//background: var(--color-bg-5);
			color: var(--color-text-2);
			font-size: 10px;
			border-radius: 4px;
			tr {
				background: var(--color-bg-5);
				height: 30px;
			}
			th {
				width: 19%;
				position: relative;
				text-align: end;
				vertical-align: middle;
				padding: 3px 0;
				min-height: 30px;
				line-height: 1.2;
				white-space: pre-line;
				&:last-child {
					width: 5%;
				}
			}
		}
		tbody {
			tr {
				padding: 4px 0;
				td {
					text-align: end;
					color: var(--color-text-2);
					font-size: 12px;
					&:last-child {
						text-align: end;
						width: 5%;
					}
				}
				&:nth-child(even) {
					background: var(--color-bg-5);
					border-radius: 4px;
				}
			}
		}
		.checked-icon {
			color: var(--color-success);
			font-size: 18px;
		}
	}
	.vip-rebate-note {
		//@include font-normal();
		color: var(--color-text-3);
		font-size: 12px;
		padding: 10px 0 8px;
		p {
			line-height: 16px;
		}
	}
	th,
	td {
		vertical-align: middle;
	}
}
</style>
